<script lang="ts" setup>
import { reactive } from 'vue';

import { Card } from 'ant-design-vue';

import ApplicationList from './modules/application-list.vue';
import UserList from './modules/user-list.vue';
import View from './modules/View.vue';

defineOptions({
  name: '修改代码配置',
  inheritAttrs: false,
});

const pageState = reactive<{
  current: string;
}>({
  current: '1',
});
</script>

<template>
  <Card
    size="small"
    @tab-change="(key) => (pageState.current = key)"
    :tab-list="[
      { key: '1', tab: '企业信息' },
      { key: '2', tab: '企业应用' },
      { key: '3', tab: '企业员工' },
    ]"
    :active-tab-key="pageState.current"
  >
    <div>
      <div v-show="pageState.current === '1'">
        <View />
      </div>
      <div v-show="pageState.current === '2'">
        <ApplicationList />
      </div>
      <div v-show="pageState.current === '3'">
        <UserList />
      </div>
    </div>
  </Card>
</template>

<style lang="scss" scoped>
.step-form-form {
  width: 750px;
  padding-bottom: 20px;
  margin: 0 auto;
}
</style>
